<template>
	<div class="j-storage">
		<j-header :indexNum="5"></j-header>
		<div class="jc-banner"></div>
		<div class="nav-back">
			<div class="tabs container clearfix">
				<div class="three-level">产品服务 <span>|</span></div>
				<div class="tab nav-tt" @click="toggleTab('Process',1)"  :class="{navActive:1 == num}">配型及移植流程（临床应用）</div>
				<div class="tab nav-tt" @click="toggleTab('Hla',2)" :class="{navActive:2 == num}">HLA在线配型</div>
			</div>
		</div>
		<prince :is="currentTab" keep-alive></prince>
		<j-footer></j-footer>
	</div>
</template>
<script>
import JHeader from '../../components/Header.vue'
import JFooter from '../../components/Footer.vue'
import Process from '../../components/Product/Process'
import Hla from '../../components/Product/Hla'
export default {
  components: {
    JHeader, JFooter, Process, Hla
  },
  data () {
    return {
      currentTab: 'Process',
      num: 1
    }
  },
  methods: {
    toggleTab: function (tab, index) {
      this.currentTab = tab // tab 为当前触发标签页的组件名
      this.num = index
    }
  },
  created () {
    if (this.$route.query.flag) {
      this.num = this.$route.query.flag
      this.currentTab = 'Hla'
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-storage{
		.clearfix{
			overflow: hidden;
		}
		.jc-banner {
			height: 150px;
			background: url(../../assets/banner/banner03.jpg) center top no-repeat;
		}
	}
</style>
